<template>
  <div class="page-cinemas">
    <div class="fixed">
      <VanNavBar title="影院" :left-text="curCityName" @click-left="$router.push({ name: 'city' })">
        <template #right>
          <VanIcon name="search" size="20" @click="$router.push({ name: 'cinemas-search' })" />
        </template>
      </VanNavBar>

      <van-dropdown-menu>
        <van-dropdown-item :title="curSelect.districtName" ref="itemRef">
          <van-grid>
            <van-grid-item
              v-for="item in districtNames"
              :key="item"
              :text="item"
              :class="{ active: curSelect.districtName === item }"
              @click="onClick(item)"
            />
          </van-grid>
        </van-dropdown-item>

        <van-dropdown-item
          v-model="curSelect.ticketFlag"
          :options="ticketFlags"
        ></van-dropdown-item>
        <van-dropdown-item v-model="curSelect.other" :options="others"></van-dropdown-item>
      </van-dropdown-menu>
    </div>

    <CinemaList :list="displayList" />
  </div>
</template>

<script lang="ts" setup>
import type { DropdownItemInstance } from 'vant'
import { getCinemaList } from '@/api'
import { useCityStore } from '@/stores/city'
import { calcDistance } from '@/utils'

const { curCityId, curCityName } = storeToRefs(useCityStore())

/** DropdownItemInstance 模板引用 */
const itemRef = ref<DropdownItemInstance | null>(null)

// 影院列表数据
const list = ref<ICinema[]>([])
/** 当前的选择 */
const curSelect = reactive({
  districtName: '全城',
  ticketFlag: 1,
  other: 1 // 1-离我最近 2-最近去过
})

/** 区的集合 */
const districtNames = computed(() => {
  const tmp = list.value.map((item) => item.districtName)
  const tmp1 = Array.from(new Set(tmp))
  return ['全城', ...tmp1]
})

/** 类型的集合 */
const ticketFlags = [
  { text: 'APP订票', value: 1 },
  { text: '前台兑换', value: 2 }
]

const others = [
  { text: '离我最近', value: 1 },
  { text: '最近去过', value: 2 }
]

/** 用于展示的影院列表数据 */
const displayList = computed(() => {
  // 先拷贝一份list
  let result = [...list.value]

  if (curSelect.other === 2) {
    // 最近去过
    result = result.filter((item) => item.isVisited === 1)
  }

  if (curSelect.districtName === '全城') {
    return result
  }

  return result.filter((item) => item.districtName === curSelect.districtName)
})

/** 区县点击 */
function onClick(name: string) {
  curSelect.districtName = name
  // 关闭 DropdownItem
  itemRef.value?.toggle(false)
}

/** 加载函数 */
async function onLoad() {
  // 调用接口
  const { cinemas } = await getCinemaList({
    cityId: curCityId.value,
    ticketFlag: curSelect.ticketFlag
  })
  // 赋值
  // list.value = cinemas
  // 为了后续的距离，对数据做二次处理
  list.value = cinemas
    .map((item) => ({
      ...item,
      distance: calcDistance(item.gpsAddress, '113.8394:22.6299')
    }))
    .sort((a, b) => a.distance - b.distance)
  // console.log('list', list.value)
  // curSelect.districtName = '全城'
}

watchEffect(() => {
  onLoad()
})
</script>

<style scoped>
.page-cinemas {
  padding-top: 94px;
  height: 100%;
  box-sizing: border-box;
  overflow-y: auto;
}

.active :deep(.van-grid-item__text) {
  color: red;
}

.fixed {
  position: fixed;
  top: 0;
  z-index: 1;
  width: 100%;
}
</style>
